{% load static %}

<!doctype html>

<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>WebcamJS Test Page</title>
    <script src="{% static 'js/webcam.min.js' %}"></script>
</head>

<body>

	<div id="my_camera"></div>
	<input type=button value="截取" onClick="take_snapshot()">
	<input type=button value="连续截取" onClick="multi_snapshot(5)">
	<div id="results"></div>

	<!-- Code to handle taking the snapshot and displaying it locally -->
	<script language="JavaScript">
		Webcam.set({
			width: 320,
			height: 240,
			image_format: 'jpeg',
			jpeg_quality: 90
		});
		Webcam.attach('#my_camera');
		function take_snapshot() {
			// take snapshot and get image data
			Webcam.snap(function (data_uri) {
				// display results in page
				document.getElementById('results').innerHTML = document.getElementById('results').innerHTML +
					'<div><img style="display:block; width:320px; height: 240px" src="' + data_uri + '"/></div>';
			});
		}
		function multi_snapshot(count) {
			for (var i = 0; i < count; i++) {
				setTimeout(function () { take_snapshot() }, 1000 * (i + 1))
			}
		}
	</script>

</body>

</html>